<template>
  <div>
    <!--
      el-menu 主菜单
      el-submenu 子菜单
      el-menu-item 内容项
    -->
   <template v-for="item in this.menuList">
     <el-submenu index="1"
                 :disabled="item.disabled"
                 :index="item.id+''"
                 :key="item.id+''"
                 v-if="item.children.length>0"
     >
       <template slot="title">
         <i :class="item.icon"></i>
         <span>{{item.menuName}}</span>
       </template>
       <!-- 子菜单 -->
       <menu-tree :menuList="item.children"/>
     </el-submenu>

     <el-menu-item v-else
                   :index="item.url+''"
                   :disabled="item.disabled"
                   :route="item.url+''"
                   :key="item.id+''"
     >
       <i :class="item.icon"></i>
       <span>{{item.menuName}}</span>
     </el-menu-item>

   </template>
  </div>
</template>

<script>
  export default {
    name: 'MenuTree',
    props: ['menuList'],
    data() {
      return {

      };
    },
    methods: {

    }
  }
</script>

<style scoped>
  /* 溢出处理 */
  .el-menu--collapse span,
  .el-menu--collapse i.el-submenu__icon-arrow {
    height: 0;
    width: 0;
    overflow: hidden;
    visibility: hidden;
    display: inline-block;
  }
  .el-submenu__icon-arrow el-icon-arrow-right{
    visibility: hidden;
  }
</style>
